<template>
	<view>
		<!-- <u-sticky>
			<view class="bg-white u-p-b-20">
				<view class="u-m-l-40 u-m-r-40">
					<u-subsection :list="sublist" :current="current" @change="sbuChange" inactiveColor="#999"
						mode="subsection" activeColor="#FF5B00" bgColor="#fff"></u-subsection>
				</view>
				<u-tabs :list="list1" lineColor="#FF5B00" :activeStyle="activeStyle"
					@click="handleChangeGetUserOrderInfoList()" :lineWidth="20" :scrollable="false"></u-tabs>
			</view>
		</u-sticky> -->
	
		<view class="card">
				<u-search placeholder="请输入电话号码" v-model="keyword" @search="handleSearch"></u-search>
			</view>
		<view class="card" v-for="(order,j) in orderList" :key="j"
			@click="$u.route('/subpkg/order/info/info?id='+order.id+'&qingyangOrderId='+order.qingyangOrderId+'&orderType=1')">
			<view class="flex align-center justify-between cell">
				<view class="time">{{order.createTime}}</view>
				<view class="loading">{{handleOrderStatusFormat(order.status,order.orderType)}}</view>
			</view>
			<view v-for="(orderDetails,k) in order.orderDetails" :key="k" class="flex product u-p-t-20 u-p-b-20">
				<view class="img-box">
					<u-image :showLoading="true" mode="aspectFill" radius="8rpx" :src="orderDetails.image"
						width="174rpx" height="174rpx">
						<view slot="loading">
							<u-loading-icon></u-loading-icon>
						</view>
					</u-image>
				</view>
				<view class="u-m-l-10">
					<view class="ellipsis2 text-black">{{orderDetails.productName}}</view>
					<view class="u-m-t-10 u-font-xs text999">{{orderDetails.unit}}</view>
					<view class="u-m-t-10 flex align-center justify-between">
						<view style="color: #FD002B;">
							<text class="text-bold  u-font-xs">￥</text>
							<text class="u-font-lgm  text-bold">{{parseFloat(orderDetails.salePrice).toFixed(2)}}</text>
							<!-- <text class="u-font-xs  text-bold"></text> -->
						</view>
						<view class="u-font-xs text999 u-p-l-80">x{{orderDetails.count}}</view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-between u-p-t-20 top-border">
				<view class="text999">{{order.id}}</view>
				<view class="text-black" v-if="order.payStatus==1">
					<text>实际支付￥</text>
					<text class="text-bold">{{parseFloat(order.payAmount).toFixed(2)}}</text>
				</view>
				<view class="text-black " v-else>
					<text>应支付￥</text>
					<text class="text-bold">{{parseFloat(order.saleAmount).toFixed(2)}}</text>
				</view>
			</view>
			<!-- <view class="flex align-center u-row-right">
				<view class="btn" @click.stop="san">扫码</view>
			</view> -->
		</view>
		
		<xloadmore :status="xloadmore"></xloadmore>

		<!-- <u-tabbar :value="tab" :fixed="true" :placeholder="true" activeColor="#FF5B00" :safeAreaInsetBottom="true">
			<u-tabbar-item text="订单" icon="home" name="order"></u-tabbar-item>
			<u-tabbar-item text="账单" icon="list" @tap="toRoute('/subpkg/bill/bill')" name="bill"></u-tabbar-item>
			<u-tabbar-item text="商品" icon="bag" @tap="toRoute('/subpkg/goods/goods')" name="product"></u-tabbar-item>
		</u-tabbar> -->
	</view>
</template>

<script>
	import {
		getShopUserOrderInfoList,
		getDictList
	} from '@/common/api/api.js'
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 5,
				},
				xloadmore: "loadmore",
				tab: 'order',
				sublist: ['洗护订单', '商城订单'],
				current: 0,
				list1: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '进行中',
				}, {
					name: '已完成',
				}, {
					name: '售后',
				}],
				activeStyle: {
					color: '#FF5B00'
				},
				userInfoId: '',
				status: '',
				orderList: [],
				orderType: "1",
				xihOrderStatus: [],
				mallOrderStatus: [],
				companyId: '',
				keyword:undefined
			}
		},
		onLoad(options) {
			this.companyId = this.$store.state.$userInfo.companyId;
			this.handleGetShopUserOrderInfoList();
			this.handleGetDictList();

		},
		mounted() {
			// 监听返回事件并刷新页面
			uni.$on('userOrderBack', this.onNavigateTo);

		},
		beforeDestroy() {
			// 移除返回事件
			uni.$off('userOrderBack', this.onNavigateTo);

		},
		methods: {
			toRoute(url) {
				uni.redirectTo({
					url: url
				})
			},
			onNavigateTo() {
				this.companyId = this.$store.state.$userInfo.companyId;
				this.handleGetShopUserOrderInfoList();
				this.handleGetDictList();
			},
			san() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			sbuChange(index) {
				this.current = index;
				this.orderType = index;
				this.orderList=[];
				this.handleChangeGetUserOrderInfoList();
			},
			handleSearch(v){
				this.keyword=v;
				this.handleGetShopUserOrderInfoList();
			}
			,
			// 读取用户订单信息
			handleGetShopUserOrderInfoList() {
				this.xloadmore = "loading";
				getShopUserOrderInfoList({
					companyId: this.companyId,
					status: this.status,
					orderType: this.orderType,
					phone:this.keyword,
					...this.params
				}).then(res => {
					if (this.orderList.length < res.data.total) {
						this.params.pageNum++
						res.data.list.map(e => {
							this.orderList.push(e);
						})
					}
					this.xloadmore = "nomore";
				})
			},
			handleGetDictList() {
				getDictList({
					type: 'order_status_mall'
				}).then(res => {
					this.mallOrderStatus = res.data;
				})
				getDictList({
					type: 'order_status_xihu'
				}).then(res => {
					this.xihOrderStatus = res.data;
				})
			},
			// 格式化状态
			handleOrderStatusFormat(status, type) {
				console.log(status, type)
				if (0 == type) {
					return this.$utils.selectDictLabel(this.xihOrderStatus, status)
				}
				if (1 == type) {
					return this.$utils.selectDictLabel(this.mallOrderStatus, status)
				}
			},
			handleChangeGetUserOrderInfoList(e) {
				this.orderList=[];
				if (!e) {
					this.status = '';
				} else {
					if (this.orderType == 0) {
						if (e.index == 0) {
							this.status = '';
						}
						if (e.index == 1) {
							this.status = '-1';
						}
						if (e.index == 2) {
							this.status = '0';
						}
						if (e.index == 3) {
							this.status = '2';
						}
						if (e.index == 4) {
							this.status = '-99';
						}
						 
					}
					if (this.orderType == 1) {
						if (e.index == 0) {
							this.status = '';
						}
						if (e.index == 1) {
							this.status = '-1';
						}
						if (e.index == 2) {
							this.status = '0';
						}
						if (e.index == 3) {
							this.status = '2';
						}
						if (e.index == 4) {
							this.status = '-99';
						}
						 
					}
				}
				
				this.handleGetShopUserOrderInfoList();
			},
			onReachBottom() {
				if (this.params.pageNum != 1) {
					this.$u.throttle(this.handleGetShopUserOrderInfoList(), 300);
				}
			}
		}
	}
</script>

<style lang="scss">
	.card {
		padding: 22rpx;
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 20rpx;

		.cell {
			padding-bottom: 22rpx;
			border-bottom: 1px solid #EEEEEE;

			.time {
				font-size: 28rpx;
				color: #999999;
			}

			.loading {
				color: #FFA42E;
			}

			.success {
				color: #0B9126;
				;
			}

			.error {
				color: #FD002B;
				;
			}

			.cancel {
				color: #FD4E00;
				;
			}
		}

		.top-border {
			border-top: 2rpx solid #EEEEEE;
		}
	}

	.btn {
		width: 120rpx;
		padding: 10rpx 20rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 20rpx;
		background-color: #FF5B00;
		border-radius: 16rpx;
	}
</style>